﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Template.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <!--  start page-heading -->
    <div id="page-heading">
        <h1>
            <a class="icons icon-circle-arrow-right"></a><span class="show-listing">Event-Calendar</span>
        </h1>
    </div>
    <div class="menu-nav">
        <ul>
            <li><a href="" class="icons icon-creat"></a>
                <h5>
                    <a href="<%=Url.Content("~/")%>Portal/Event/Create">Create new event </a>
                </h5>
            </li>
            <li><a href="" class="icons icon-list"></a>
                <h5>
                    <a href="<%=Url.Content("~/")%>Portal/Event">Click here to view</a></h5>
            </li>
            <li><a href="" class="icons icon-list"></a>
                <h5>
                    <a href="<%=Url.Content("~/")%>Portal/Event/Calendar">Click here to view Calendar</a></h5>
            </li>
        </ul>
    </div>
    <!-- end page-heading -->
    <table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
        <tr>
            <th rowspan="3" class="sized">
                <img src="<%=Url.Content("~/Content/images/shared/side_shadowleft.jpg")%>" width="20"
                    height="300" alt="" />
            </th>
            <th class="topleft">
            </th>
            <td id="tbl-border-top">
                &nbsp;
            </td>
            <th class="topright">
            </th>
            <th rowspan="3" class="sized">
                <img src="<%=Url.Content("~/Content/images/shared/side_shadowright.jpg")%>" width="20"
                    height="300" alt="" />
            </th>
        </tr>
        <tr>
            <td id="tbl-border-left">
            </td>
            <td>
                <!--  start content-table-inner ...................................................................... START -->
                <div id="content-table-inner">
                    <% Html.RenderPartial("Measage");%>
                    <div id="table-content-left">
                        <div id="pending-post-property-request">
                            <% Html.RenderPartial("_Calendar");%>
                        </div>
                    </div>
                    <div class="fancybox-wrap">
                    </div>
                    <!-- end pending-post-property-request -->
                </div>
            </td>
            <td id="tbl-border-right">
            </td>
        </tr>
        <tr>
            <th class="sized bottomleft">
            </th>
            <td id="tbl-border-bottom">
                &nbsp;
            </td>
            <th class="sized bottomright">
            </th>
        </tr>
    </table>
    <!--  end table-content  -->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CSS" runat="server">
    <link rel="stylesheet" href="<%=Url.Content("~/Scripts/fullcalendar/fullcalendar.css") %>"
        type="text/css" />
    <link href="<%=Url.Content("~/Scripts/qtip2/jquery.qtip.min.css") %>" rel="stylesheet"
        type="text/css" />
    <style type="text/css">
        .ibutton
        {
            background-color: #FFFFFF;
            background-image: -moz-linear-gradient(center top , #FFFFFF 2%, #F0F0F0 2%, #DEDEDE 100%);
            border: 1px solid #969696;
            border-radius: 2px 2px 2px 2px;
            box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
            color: #515151;
            cursor: pointer;
            display: block;
            float: right;
            font: bold 11px Tahoma;
            height: 1.65em;
            outline: 0 none;
            padding: 0 1em;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
            vertical-align: middle;
            white-space: nowrap;
            word-wrap: normal;
            margin-right: 15px;
           
        }
        .ibutton :hover
        {
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
            color: #818181;
            background-color: #fff;
            background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));
            background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);
            background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);
            background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);
            background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
            border-color: #aeaeae;
            box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
        }
        h2, .widgeticons li a span, .logintitle
        {
            font-family: 'RobotoBold' , 'HelveticaNeue' , Arial, sans-serif;
        }
        h2
        {
            font-size: 24px;
            line-height: 30px;
            font-weight: bold;
        }
        .color-event
        {
            height: 16px;
            width: 16px;
            display: block;
            cursor: pointer;
            float: left;
            margin-right: 4px;
        }
        #icon-img-color
        {
            position: absolute;
            margin-top: 6px;
            margin-left: 3px;
        }
        .qtip-event
        {
            min-width: 488px;
        }
        .item-color
        {
            height: 18px;
            width: 18px;
            display: block;
            cursor: pointer;
            border: 1px solid #FFFFFF;
        }
        .item-color:hover
        {
            border: 1px solid black;
        }
        .qtip-tool-color
        {
            min-width: 398px;
        }
        .ecp-dt-hr
        {
            background-color: #ababab;
            height: 18px;
            width: 1px;
            display: block;
        }
        .tool-color
        {
        }
        .tool-color li
        {
            display: inline-block;
            margin: 5px;
        }
        .tool-color li a
        {
        }
        .div-event-title
        {
            float: left;
            color: #c6322a;
            width: 85%;
            line-height: 15px;
        }
        .txtEventTitle
        {
            border: 1px solid #BF9608;
        }
        .hover
        {
            background: #ffc;
            cursor: text;
        }
        .qtip-save-title
        {
            position: absolute;
            right: 28px;
            cursor: pointer;
            outline: medium none;
            border-width: 1px;
            border-style: solid;
            border-color: transparent;
            display: block;
            width: 28px;
            height: 17px;
        }
        .ui-icon-save
        {
            margin-left: 2px;
            font: bold 10px Tahoma;
        }
        .ui-icon-save:hover
        {
            color: red;
        }
        .content_detail
        {
        }
        .content_detail p
        {
            font: 13px Arial;
            line-height: 28px;
        }
        .content_detail .title
        {
            font-weight: bold;
        }
        .fancybox-overlay
        {
            background: url("<%=Url.Content("~/Scripts/fancybox/transparent.png")%>") !important;
        }
        .buttons
        {
            font: bold 12px Tahoma;
            color: #0158C2;
            cursor: pointer;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="JS" runat="server">

    <script type="text/javascript" src="<%=Url.Content("~/Scripts/fullcalendar/jquery-ui-1.9.2.min.js")%>"></script>

    <script type="text/javascript" src="<%=Url.Content("~/Scripts/fullcalendar/fullcalendar.min.js")%>"></script>

    <script src="<%=Url.Content("~/Scripts/qtip2/jquery.qtip.min.js")%>" type="text/javascript"></script>

    <script src="<%=Url.Content("~/Scripts/Run.js")%>" type="text/javascript"></script>

    <script src="<%=Url.Content("~/Scripts/knockout/knockout.js")%>" type="text/javascript"></script>

    <script src="<%=Url.Content("~/Scripts/knockout/knockout.mapping.js")%>" type="text/javascript"></script>

    <script type='text/javascript'>
        EVENTOBJ = "";
        jQuery(document).ready(function() {
      
            var TASK = "";
            var sendAjax = function(data) {
                $("#content-outer").showLoading();

                if (data.end === null) {
                    data.end = data.start;
                }
                var enventObj = {
                    ID: data.id.toString(),
                    Event_ID: data.id.toString(),
                    Title: data.title,
                    EventDate: data.start,
                    EventDateEnd: data.end,
                    EventColor: data.color
                };
                var dataObj = ko.toJSON(enventObj);

                $.ajax({
                    type: "POST",
                    cache: false,
                    url: BASE_URL + "Portal/Event/QuickUpdate",
                    data: dataObj,
                    contentType: 'application/json',
                    success: function(result) {
                        $("#content-outer").hideLoading();
                        jSuccess(
                            '<div class="msgnotify"><b>Save successfully</b></div>',
                            {
                                autoHide: true, // added in v2.0
                                HorizontalPosition: 'center',
                                VerticalPosition: 'top'
                            });



                    }
                });
            };
            var calendar = jQuery('#calendar').fullCalendar({
                eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
                    Confirm("Are you sure about this change?", function(yes) {
                        if (yes) {
                            //Send to server
                            sendAjax(event);
                        } else {
                            revertFunc();
                        }
                    });


                }, //END DROP
                height: 540,
                more: 4,
                eventSources: [
                BASE_URL + 'Portal/Event/GetEvents'
                ],
                eventClick: function(rootevent, element) {
                    $(".qtip").hide();

                    var comma = ",";
                    if (rootevent.end === null) comma = "";
                    //template for event
                    var eventcontent = "<div class='content_detail'>";
                    eventcontent += "<p><span class='title'>Date </span><span>" + $.fullCalendar.formatDate(rootevent.start, "ddd, MMM d ") + "," + rootevent.timestart + " - " + $.fullCalendar.formatDate(rootevent.end, "ddd, MMM d ") + comma + rootevent.timesend + "</span></p>";
                    eventcontent += "<p><span class='title'>Where </span><span>" + rootevent._where + "</span></p>";
                    eventcontent += "<p><span class='title'>Contact </span><span>" + rootevent.contact + "</span></p>";
                    eventcontent += "<hr style='margin-top: 8px;'/>";
                    eventcontent += "<p><a class='buttons remove-event'>Delete</a> | <a class='buttons edit-event' rel='Portal/Event/QuickEvent/" + rootevent.id + "'> Edit event</a></p>";

                    eventcontent += "</div>";
                    var root = $(this).qtip({
                        overwrite: false, // Force one tooltip per event
                        content: {
                            text: eventcontent,
                            title: {
                                text: "<a title='Edit event color' class='color-event' style='background-color:" + rootevent.color + ";'><img id=\"icon-img-color\" src=\"" + BASE_URL + "Content/images/bullet-arrow-down.png\" ></a>" + "<div class='div-event-title'><span class='spnEventTitle'>" + rootevent.title + "</span><input type='text' id='EventTitle" + rootevent.id + "' class='txtEventTitle'  onfocus='this.value = this.value;'  style='display:none;width: 100%;' data-id='" + rootevent.id + "' value='" + rootevent.title + "'/></div>",
                                button: true
                            }
                        }, // Use the event description from the event.data object
                        position: {
                            my: 'top center', // Position the tooltip...
                            at: 'bottom center', // ...at the bottom of the event
                            viewport: $(window) // Try to keep the tooltip onscreen at all times
                        },
                        show: {
                            event: 'click', // Show the tooltip when event is clicked and tooltip is 'ready' e.g. rendered
                            ready: true
                        },
                        hide: true, // Hide when the tooltip loses focus
                        style: {
                            classes: 'qtip-wiki qtip-bootstrap qtip-shadow qtip-event' // Apply a dark theme to make it look extra sexy...
                        },
                        events: {
                            hide: function(event, api) {
                                $(".spnEventTitle").show();
                                $(".txtEventTitle").hide();
                                $(".qtip-save-title").remove();

                            }
                        }
                    });

                    //Action


                    //
                    $(".color-event").live('click', function() {

                        var obj = $(this).qtip({
                            overwrite: true, // Force one tooltip per event
                            content: {
                                text: '<p>Choose an event color:</p> <ul class="tool-color"><li><a title="none" class="item-color" id="FAD165" rel="' + rootevent.id + '" style="background-color:#FAD165"></a></li><li><a class="ecp-dt-hr"></a></li><li><a class="item-color" title="bold blue"  rel="' + rootevent.id + '" id="5484ED" style="background-color:#5484ED"></a></li><li><a id="A4BDFC" title="blue" rel="' + rootevent.id + '" class="item-color" style="background-color:#A4BDFC"></a></li><li><a id="46D6DB" title="turquoise" rel="' + rootevent.id + '"  class="item-color" style="background-color:#46D6DB"></a></li><li><a id="7AE7BF" title="green" rel="' + rootevent.id + '"  class="item-color" style="background-color:#7AE7BF"></a></li><li><a id="51B749" title="bold green" rel="' + rootevent.id + '"  class="item-color" style="background-color:#51B749"></a></li><li><a id="FBD75B" title="yellow" rel="' + rootevent.id + '"  class="item-color" style="background-color:#FBD75B"></a></li><li><a id="ffb878" title="orange" rel="' + rootevent.id + '"  class="item-color" style="background-color:#ffb878"></a></li><li><a id="ff887c" title="red" rel="' + rootevent.id + '"  class="item-color" style="background-color:#ff887c"></a></li><li><a id="DC2127" title="bold red" rel="' + rootevent.id + '"  class="item-color" style="background-color:#DC2127"></a></li><li><a id="DBADFF" title="purple" rel="' + rootevent.id + '"  class="item-color" style="background-color:#DBADFF"></a></li><li><a id="E1E1E1" title="gray" rel="' + rootevent.id + '"  class="item-color" style="background-color:#E1E1E1"></a></li></ul>'
                            }, // Use the event description from the event.data object
                            position: {
                                my: 'top left ', // Position the tooltip...
                                at: ' left bottom ', // ...at the bottom of the event
                                viewport: $(window) // Try to keep the tooltip onscreen at all times
                            },
                            show: {
                                event: 'click', // Show the tooltip when event is clicked and tooltip is 'ready' e.g. rendered
                                ready: true
                            },
                            hide: 'unfocus', // Hide when the tooltip loses focus
                            style: {
                                classes: 'qtip-wiki qtip-light qtip-shadow qtip-tool-color' // Apply a dark theme to make it look extra sexy...
                            },
                            events: {
                                show: function() {
                                    $(".item-color").live().each(function() {
                                        var self = (this);

                                        if (rootevent.color == ("#" + self.id)) {
                                            var imgsrc =BASE_URL + "Content/images/symbol_check.gif";
                                            $(this).html('<img id="detail-icon-img" src="'+imgsrc+'" style="position:absolute">');
                                        }
                                    });
                                }
                            }
                        });
                    });
                    //
                    //Action when chosen color
                    $(".item-color").live('click', function() {
                        var self = (this);
                        if (rootevent.id == self.rel) {
                            rootevent.color = "#" + self.id;

                            //Send to server
                            sendAjax(rootevent);

                            $('#calendar').fullCalendar('updateEvent', rootevent);


                        }
                    });
                    //Action change title
                    $(".div-event-title").live('mouseover', function() {
                        $(this).addClass("hover");
                    });

                    $(".div-event-title").live('mouseout', function() {
                        $(this).removeClass("hover");
                    });

                    $(".div-event-title").live('click', function() {
                        var title = $(this).text();
                        $(".spnEventTitle").hide();
                        $(".txtEventTitle").show().trigger("focus");
                        //set focus


                        $(".qtip-close").css("height", "17px");
                        $(".qtip-close").attr("title", "Discard changes");
                        $(".qtip-close").before('<a class="qtip-save-title qtip-icon" rel="' + rootevent.id + '" title="Save title" aria-label="Save title" role="button" ><span class="ui-icon-save"> Save </span></a>');


                    });
                    //Save Change title
                    $(".qtip-save-title").live('click', function() {
                        var self = this;
                        var valEventTitle = $("#EventTitle" + self.rel).val();
                        if (valEventTitle !== undefined) {
                            if (valEventTitle == "") {
                                valEventTitle = "(No title)";
                            }

                            if (rootevent.id == self.rel) {
                                //Then
                                rootevent.title = valEventTitle;
                                //Send to server
                                sendAjax(rootevent);
                                $('#calendar').fullCalendar('updateEvent', rootevent);


                            }
                        }
                    });
                    //Key press enter
                    $(".txtEventTitle").live('keypress', function(e) {
                        if (e.which == 13) {
                            var id = $(this).attr('data-id');
                            var valEventTitle = $("#EventTitle" + id).val();
                            if (valEventTitle !== undefined) {
                                if (valEventTitle == "") {
                                    valEventTitle = "(No title)";
                                }

                                if (rootevent.id == id) {
                                    //Then
                                    rootevent.title = valEventTitle;
                                    //Send to server
                                    sendAjax(rootevent);

                                    $('#calendar').fullCalendar('updateEvent', rootevent);
                                    //

                                }
                            }
                        }
                    });
                    //End

                    //Edit call
                    $(".edit-event").live('click', function() {

                        $('.qtip').hide();
                        var url = this.rel;
                        EVENTOBJ = rootevent;
                        $.fancybox.open({
                            'href': BASE_URL + url,
                            'type': 'iframe',
                            'titleShow': false,
                            openEffect: 'elastic',
                            closeEffect: 'elastic',
                            width: '91%'
                        });

                    });
                    //Delete Event
                    $(".remove-event").live('click', function() {
                        $(this).qtip({
                            overwrite: false, // Force one tooltip per event
                            content: {
                                text: "<input class='ibutton' id='btn-delete-event' type='button' value='Yes'/>",
                                title: {
                                    text: "Confirm",
                                    button: true
                                }
                            }, // Use the event description from the event.data object
                            position: {
                                my: 'top center', // Position the tooltip...
                                at: 'bottom center', // ...at the bottom of the event
                                viewport: $(window) // Try to keep the tooltip onscreen at all times
                            },
                            show: {
                                event: 'click', // Show the tooltip when event is clicked and tooltip is 'ready' e.g. rendered
                                ready: true
                            },
                            hide: 'unfocus', // Hide when the tooltip loses focus
                            style: {
                                classes: 'qtip-wiki qtip-blue  qtip-shadow ' // Apply a dark theme to make it look extra sexy...
                            },
                            events: {
                                hide: function(event, api) {


                                }
                            }
                        });
                        //Do Action delete
                        $("#btn-delete-event").live('click', function() {
                            $('.qtip').hide();
                            $("#content-outer").showLoading();

                            $.ajax({
                                type: 'GET',
                                url: BASE_URL + "Event/QuickDelete/" + rootevent.id,
                                success: function() {
                                    $("#content-outer").hideLoading();
                                    jSuccess(
                                    '<div class="msgnotify"><b>Save successfully</b></div>',
                                    {
                                        autoHide: true, // added in v2.0
                                        HorizontalPosition: 'center',
                                        VerticalPosition: 'top'
                                    });

                                }
                            });
                            $('#calendar').fullCalendar('removeEvents', rootevent.id);

                            $('#calendar').fullCalendar("rerenderEvents");
                        });

                    });

                },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                buttonText: {
                    prev: '&laquo;',
                    next: '&raquo;',
                    prevYear: '&nbsp;&lt;&lt;&nbsp;',
                    nextYear: '&nbsp;&gt;&gt;&nbsp;',
                    today: 'today',
                    month: 'month',
                    week: 'week',
                    day: 'day'
                },
                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay) {

                    var data = "start=" + $.fullCalendar.formatDate(start, 'dd-MMM-yyyy') + "&end=" + $.fullCalendar.formatDate(end, 'dd-MMM-yyyy');
                    $.fancybox.open({
                        'href': BASE_URL + 'Portal/Event/QuickEvent?' + data,
                        'type': 'iframe',
                        'titleShow': false,
                        openEffect: 'elastic',
                        closeEffect: 'elastic',
                        width: '91%'
                    });


                    calendar.fullCalendar('unselect');
                },
                editable: true
            });


        });

    </script>

</asp:Content>
